<script lang="ts" setup>
import { getHomeShowApi } from '@/common/apis/home'
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import { useSidebarStore } from '@/common/stores/home-sidebar'


const router = useRouter()

const showData = ref()
const sidebarStore = useSidebarStore()


const getHomeShowData = async () => {
  const res = await getHomeShowApi(showData.value)
  showData.value = res.data.data
  console.log(showData.value)
}

const dataItems = ref([
  { id: 1, title: '合同待签署', key: 'contractSignTotal', link: '/employee' },
  { id: 2, title: '组织人数', key: 'employeeTotal', link: '/organization' },
  { id: 3, title: '接口总访问', key: 'interfaceAccessTotal', link: '/employee2' },
  { id: 4, title: '代入职', key: 'regularEmployeeTotal', link: '/employee3' },
  { id: 5, title: '待离职', key: 'toBeDismissed', link: '/employee4' },
  { id: 6, title: '待转正', key: 'toBeConfirmed', link: '/employee5' },
  { id: 7, title: '正式员工', key: 'toBeEmployed', link: '/employee6' },
])

const handleItemClick = (link: string) => {

  // 去掉开头的 '/' 
  const trimmedLink = link.startsWith('/') ? link.slice(1) : link

  // 跳转到指定页面
  router.push(link)

  // 保存当前选中的菜单项
  sidebarStore.setSelectedKeys([trimmedLink])

  console.log(link, 'link')
}

// 挂载
onMounted(() => {
  getHomeShowData()
})
</script>

<template>
  <!-- 公司简介 -->
  <div class="firm-box">
    <div class="firm-box-name">
      <a-image style="width: 50px" :preview="false" src="/src/assets/common/defaultHead.png" mode="scaleToFill" />
      <div class="firm-box-name-simple">
        <h1>江苏传智播客教育科技股份有限公司</h1>
        <h4>管理员 | 传智播客-总裁办</h4>
      </div>
    </div>
    <div v-if="showData" class="firm-box-content">
      <div v-for="(item, index) in dataItems" :key="index" @click="handleItemClick(item.link)"
        class="firm-box-content-item">
        <h1 class="firm-box-content-text">{{ item.title }}</h1>
        <p class="firm-box-content-quantity">{{ showData[item.key] }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.firm {
  &-box {
    padding: 20px;
    border-radius: 5px;
    background-color: white;

    &-name {
      width: 100%;
      display: flex;
      gap: 10px;
    }

    &-content {
      width: 100%;
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;

      /* 允许换行 */
      &-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        flex: 0 0 18%;
        /* 设置每项的宽度比例 */
      }

      &-text {
        font-size: 13px;
      }

      &-quantity {
        margin-top: 10px;
        font-size: 30px;
      }
    }
  }
}
</style>
